<template>
  <div>
    <el-form ref="formRef" :model="form" :rules="rules" label-width="120">
      <el-form-item label="首页地图" prop="mapObj">
        <div class="flex flex-col gap-2">
          <el-upload
            ref="uploadRef"
            v-model:file-list="mapFile"
            :action="uploadFileUrl"
            :on-success="handleMapUpload"
            :on-remove="handleMapRemove"
            :show-file-list="false"
            list-type="picture"
          >
            <div class="flex gap-2">
              <el-input
                v-model="actionMapName"
                placeholder="地图图片地址"
                readonly
                style="width: 400px"
              />
              <el-button type="primary" class="min-w-24">上传</el-button>
            </div>
            <el-button
              type="primary"
              class="min-w-24 ml-2"
              @click="handleMapPreview"
            >
              预览
            </el-button>
          </el-upload>
          <div
            v-if="form.mapObj?.response"
            class="size-36 relative rounded-lg overflow-hidden border"
          >
            <el-button
              link
              icon="CircleCloseFilled"
              @click="handleMapClear"
              class="absolute right-1 top-1"
            />
            <img :src="`${baseUrl}${form.mapObj.response}`" />
          </div>
          <div v-else>暂无上传</div>
        </div>
      </el-form-item>
      <el-divider />
      <el-form-item label="笔刷半径" prop="brushRadius">
        <el-input-number
          v-model="brushRadius"
          :min="1"
          controls-position="right"
        />
      </el-form-item>
      <el-form-item label="最大画笔长度" prop="brushLength">
        <el-input-number
          v-model="brushLength"
          :precision="0"
          :min="1"
          controls-position="right"
        />
      </el-form-item>
      <el-divider />
    </el-form>
    <el-button
      type="primary"
      icon="Upload"
      size="large"
      class="mt-8 min-w-36"
      @click="submitForm"
    >
      保存
    </el-button>
  </div>
</template>

<script setup>
import {
  ref,
  toRefs,
  reactive,
  watch,
  computed,
  getCurrentInstance,
} from "vue";
import { upload, uploadFile } from "@/api/tools";
import { getHomePage, updateHomePage } from "@/api/shadow";
import { genFileId } from "element-plus";
import axios from "axios";
import { getBaseUrl } from "@/api/request";

const { proxy } = getCurrentInstance();
const baseUrl = getBaseUrl();
const uploadFileUrl = ref(baseUrl + "api/admin/Tools/upload");

const mapFile = ref([]);
const brushRadius = ref(1);
const brushLength = ref(1);

const data = reactive({
  form: {
    mapObj: {},
    brushObj: {},
  },
  rules: {
    mapObj: [{ required: true, message: "请选择地图图片", trigger: "change" }],
  },
});
const { form, rules } = toRefs(data);

const actionMapName = computed(() => form.value.mapObj?.name);
watch(
  () => brushRadius.value,
  (v) => (form.value.brushObj["radius"] = v)
);
watch(
  () => brushLength.value,
  (v) => (form.value.brushObj["length"] = v)
);

function getForm() {
  getHomePage().then((response) => {
    const { mapImage, brushConfiguration } = response.data;
    const mapObj = JSON.parse(mapImage);
    if (mapObj) {
      form.value.mapObj = mapObj;
      // todo 可以请求blob文件的话，可以预览
    }
    const brushObj = JSON.parse(brushConfiguration);
    if (brushObj) {
      form.value.brushObj = brushObj;
      brushRadius.value = brushObj.radius;
      brushLength.value = brushObj.length;
    }
  });
}

function handleMapUpload() {
  const { uid, name, response, url } = mapFile.value[0];
  form.value.mapObj = { uid, name, response, url };
  proxy.$refs["uploadRef"].clearFiles();
}

function handleMapPreview() {
  const url = form.value.mapObj?.response;
  if (url) window.open(baseUrl + url, "_blank");
}

function handleMapClear() {
  proxy.$refs["uploadRef"].clearFiles();
  form.value.mapObj = null;
}

function handleMapRemove() {
  form.value.mapObj = null;
}

function submitForm() {
  proxy.$refs["formRef"].validate((valid) => {
    if (valid) {
      updateHomePage({
        mapImage: JSON.stringify(form.value.mapObj),
        brushConfiguration: JSON.stringify(form.value.brushObj),
      }).then((res) => {
        proxy.$modal.msgSuccess("设置存储成功");
        getForm();
      });
    }
  });
}

getForm();
</script>
